<template>
  <div id="myLineId" class="bar">
      bar
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data(){
        return{
            echart:null
        }
    },
    mounted(){
        this.initEchart()   // 首屏渲染
    },
    methods:{
        initEchart(){
            this.$nextTick(()=>{
                this.echart = echarts.init(document.getElementById('myLineId'))
                this.echart.setOption(this.option())
            })
        },
        option(){
            let option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 10,  // 设置宽度
                itemHeight: 4, // 设置高度
                itemGap: 24, // 设置间距
                data: ['收入', '支出'],
                textStyle: {
                    //文字样式
                    color: '#c1dafc',
                    fontSize: '12'
                },
                right: '30%'
              },
              xAxis: [
                {
                  type: 'category',
                  data: [],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '收入支出报告',
                  min: 0,
                  max: 500,
                  interval: 100,
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '收入',
                  type: 'bar',
                  barWidth: '20%',
                  data: [400, 260, 170, 220, 170, 260, 460, 220, 204, 200,380,168,200,175],
                  itemStyle: {
                            normal: {
                                barBorderRadius:[10, 10, 0, 0], // 设置柱状图圆角
                            
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                            {offset: 1, color: 'rgba(255,255,255,0)'},
                            {offset: 0.4, color: '#9179f8'},
                            {offset: 0.9, color: '#efd4fe'}
                                ]
                            )
                          },
                        },
                        
                    },
              {
                name: '支出',
                type: 'bar',
                barWidth: '20%',
                data: [300, 198, 120, 160, 40, 96, 140, 300, 148.7, 96,186,210,144,168],
                itemStyle: {
                            normal: {
                                barBorderRadius:[10, 10, 0, 0], // 设置柱状图圆角
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                            {offset: 1, color: 'rgba(255,255,255,0)'},
                            {offset: 0.4, color: '#74b0fb'},
                            {offset: 0.9, color: '#89f4fd'}
                                ]
                            )
                            },
                            
                        }

              }
              ],
              color: ['#b1de6a', '#4ab0ee']
            };
            return option
        }
    }
}
</script>

<style lang="less" scoped>
.bar{
    width: 730px;
    height: 520px;
}
</style>